/**
 * Created by xmgong on 2017/12/13.
 * 商品规格
 */
import React from 'react';
import {connect} from 'react-redux';
import {View, FlatList, Text, TouchableOpacity, TextInput, ScrollView} from 'react-native';
import {naviPush} from '../../navigatorApp/actions'
import CLNavigatorHeader from '../../component/CLNavigatorHeader';
import styles from './styles';
import themeconfig from '../../config/theme';
import CLTagView from '../../component/CLTagView'
import StepInfo from './stepInfo';
import {saveProducts} from './actions';
import LmmKeyboardAvoidingView from '../../component/LmmKeyboardAvoidingView';

class Standards extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        header: <CLNavigatorHeader navigation={navigation} title="规格"/>
    });

    constructor(props) {
        super(props);
        this.state = {
            standardList: []
        };
        this.goodsId = props.navigation.state.params.id;
    }

    componentDidMount() {
        let temp = this.props.Products;
        this.setState({
            standardList: temp
        });
    }

    editDetail = () => {
        this.props.naviPush("ProductDetail", {id: this.goodsId});
    };

    saveStandards = () => {
        let temp = [];
        this.state.standardList.map((item) => {
            temp.push({
                productId: item.productId,
                productNumber: item.productNumber,
                productMarketPrice: item.productMarketPrice,
                productShopPrice: item.productShopPrice,
                productTradePrice: item.productTradePrice
            })
        });
        let params = {
            token: this.props.token,
            goodsId: this.goodsId,
            productList: JSON.stringify(temp)
        };
        let self = this;
        this.props.saveProducts(params, function () {
            self.editDetail();
        });
    };

    changeStock = (item, txt) => {
        let one = item;
        let list = this.state.standardList;
        list.map((item) => {
            if (item.productId == one.productId) {
                item.productNumber = txt;
            }
        });
        this.setState({
            standardList: list
        })
    };

    _renderItem = (item) => {
        let values = item.goodsAttr.split(";");
        let temp = values.map((key) => {
            if (key.length > 0) {
                return (<CLTagView
                    customStyle={{
                        margin: 5,
                        borderColor: themeconfig.maincolor
                    }}
                    title={key}
                    textStyle={{
                        fontSize: 14,
                        color: themeconfig.maincolor
                    }}/>);
            }
        });
        let tagViews = (<View style={styles.tagcontainer}>{temp}</View>);

        let stockStr = "" + item.productNumber;
        if (stockStr == "0"){
            stockStr = "";
        }
        return (
            <View 
            style={{
                flexDirection: 'column',
                paddingLeft: 10,
                paddingRight: 10,
                paddingTop: 5,
                paddingBottom: 5,
                backgroundColor: 'white'
            }}>
                <View style={{flexDirection: 'row', marginBottom: 5}}>
                    {tagViews}
                </View>
                <View style={{flexDirection: 'row', paddingLeft: 5, paddingRight: 5, alignItems: 'center'}}>
                    <View style={{flex: 1}}/>
                    <Text style={{marginRight: 5}}>库存</Text>
                    <View style={{
                        borderWidth: 1,
                        borderColor: '#eee',
                        marginTop: 5,
                        paddingLeft:5,
                        marginBottom: 5,
                        justifyContent:'center',
                        width: 100,
                        height: 40
                    }}>
                        <TextInput
                            placeholder="0"
                            keyboardType='numeric'
                            underlineColorAndroid='transparent'
                            value={stockStr}
                            onChangeText={(txt) => this.changeStock(item, txt)}
                        />
                    </View>
                </View>
                <View style={{height: 1, backgroundColor: '#eee'}}/>
            </View>);
    };

    _ItemSeparatorComponent = () => {
        return (<View style={{height: 1, backgroundColor: '#eee'}}/>)
    };

    render() {
        const self = this;
        return (<View style={{flex: 1}}>
            <LmmKeyboardAvoidingView keyboardVerticalOffset={ 64 }>
            <ScrollView>
                <View>
            <StepInfo backgroundColor='#f8f7f7' step={1} index={2}/>
                {this.state.standardList.map((item) => {
                    return self._renderItem(item);
                })}
                <TouchableOpacity
                onPress={() => {
                    this.saveStandards()
                }}>
                <View style={styles.submitButton}>
                    <Text style={{
                        color: "white"
                    }}>下一步</Text>
                </View>
            </TouchableOpacity>
                </View>
            </ScrollView>
            </LmmKeyboardAvoidingView>
            </View>
            );
    }
}

const mapStateToProps = (state) => {
    return {
        token: state.mainmodel.token,
        Products: state.product.Products
    }
};


const mapDispatchToProps = (dispatch) => {
    return {
        naviPush: (routerName, params) => {
            dispatch(naviPush(routerName, params));
        },
        saveProducts: (params, callback) => {
            dispatch(saveProducts(params, callback));
        }
    }
};

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(Standards);



